<template>
  <div id="SoundEqEdit">
    <a-upload
      class="upload"
      name="file"
      :multiple="true"
      :show-upload-list="false"
      :custom-request="customUploadRequest"
      accept=".json"
    >
      <a-button type="primary" style="margin-left: 8px">上传</a-button>
    </a-upload>
    <div class="SoundEq1">
      <div class="SoundEq1Title">参数设置</div>
      <a-table :columns="columns" :data-source="tableData" :pagination="false">
      </a-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: "设备ID",
          dataIndex: "id",
        },
        {
          title: "平台名称",
          dataIndex: "platformName",
        },
        {
          title: "设备名称",
          dataIndex: "equipName",
        },
        {
          title: "设备host",
          dataIndex: "host",
        },
        {
          title: "设备端口",
          dataIndex: "port",
        },
      ],
      tableData: [],
      timer: null,
    };
  },
  created() {
    this.getData();
  },
  mounted() {
    this.timer = setInterval(() => {
      this.getData();
    }, 10000);
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
    this.timer = null;
  },
  methods: {
    customUploadRequest({ file, onSuccess, onError }) {
      const formData = new FormData();
      // 添加文件到 FormData
      formData.append("file", file);
      // 如果需要其他参数，可以在这里添加
      // formData.append('additionalParam', 'value');
      this.$axios.post("/modbus/equip/upload", formData).then((res) => {
        if (res.code == 200) {
          this.$message.success("上传成功");
          this.curriculumId = null;
          this.getData();
          this.$emit("getEquipList");
        }
      });
    },
    getData() {
      this.$axios.get("/modbus/equip/info").then((res) => {
        this.tableData = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#SoundEqEdit {
  // display: flex;
  // justify-content: space-around;
  position: relative;
  .upload {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -50px;
  }
  .SoundEq1 {
    width: 970px;
    height: 740px;
    margin: 60px auto;
    position: relative;
    background-image: url("~@/assets/img/SoundEq1.png");
    background-size: contain;
    /* 背景图缩放以完整显示 */
    background-repeat: no-repeat;
    /* 防止背景图重复 */
    background-position: center;

    /* 将背景图居中显示 */
    .SoundEq1Title {
      position: absolute;
      left: 46%;
      font-size: 22px;
      color: white;
      font-family: "KaiTi", "楷体", serif;
    }
  }
}
</style>
<style lang="scss">
#SoundEqEdit {
  .ant-table-wrapper {
    width: 90%;
    position: absolute;
    top: 5%;
    left: 5%;
  }

  .ant-table-thead {
    th {
      background: #0e344e !important;
      color: white !important;
    }
  }

  .ant-table-body,
  .ant-table-placeholder {
    min-height: 680px;
    /* 设置表格的最小高度 */
    background: #0e344e !important;
    overflow-y: auto !important;
  }

  .ant-table-placeholder {
    height: 300px !important;
    min-height: 300px !important;
    border-bottom: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 8%;
  }
}
</style>